import React from 'react'
import { Carousel, WingBlank, Flex, Grid } from 'antd-mobile';
import axios from 'axios'

import './index.scss'

// 导入图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'



// 导航栏数据
const navs = [
    {
        id: 1,
        title: '整租',
        imgSrc: Nav1,
        path: '/home/list'
    }, {
        id: 2,
        title: '合租',
        imgSrc: Nav2,
        path: '/home/list'
    }, {
        id: 3,
        title: '地图找房',
        imgSrc: Nav3,
        path: '/home/map'
    }, {
        id: 4,
        title: '去出租',
        imgSrc: Nav4,
        path: '/home/rent'
    },
]

/** 
 * 轮播图存在两个问题
 * 1 不会自动播放 2 从其他路径返回时,高度不够
 * 
 * 原因: 轮播图是动态加载的,加载完成前后轮播图数量不一致
 * 
 * 解决: 1 在state中添加表示轮播图加载完成的判定条件
 *      2 在轮播图数据加载完成时,修改这个判定条件为true
 *      3 只有在轮播图数据加载完成的情况下,才渲染轮播图组件
*/


export default class Index extends React.Component {
    constructor() {
        super()
        this.state = {
            // 轮播图状态数据
            swipers: [],
            isSwiperLoaded: false,

            // 租房小组数据
            groups: [],
            // 最新数据
            news: [],
            curCityName:''
        }
    }

    // 获取轮播图数据的方法
    async getSwipers() {
        const { data: res } = await axios.get('http://localhost:8081/home/swiper')
        // console.log(res);
        this.setState((state) => {
            return {
                swipers: res.body,
                isSwiperLoaded: true
            }
        })
    }
    // 获取租房小组数据的方法
    async getGroups() {
        // const {data:res}=await axios.get('http://localhost:8081/home/groups?area=AREA%7C88cff55c-aaa4-e2e0')
        const { data: res } = await axios.get('http://localhost:8081/home/groups', {
            params: {
                area: 'AREA%7C88cff55c-aaa4-e2e0'
            }
        })
        // console.log(res);
        this.setState(state => {
            return {
                groups: res.body
            }
        })
    }
    // 获取news数据的方法
    async getNews() {
        const { data: res } = await axios.get('http://localhost:8081/home/news?area=AREA%7C88cff55c-aaa4-e2e0')
        console.log(res);
        this.setState(() => {
            return {
                news: res.body
            }
        })
    }

    // 渲染轮播图解构
    renderSwiper() {
        return this.state.swipers.map(item => (
            <a
                key={item.id}
                href="http://www.baidu.com"
                style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
                <img
                    src={`http://localhost:8081${item.imgSrc}`}
                    alt={item.alt}
                    style={{ width: '100%', verticalAlign: 'top' }}
                />
            </a>
        ))
    }
    // 渲染导航栏数据
    renderNavigation() {
        return navs.map(item => {
            return (
                <Flex.Item key={item.id} onClick={() => this.props.history.push(item.path)}>
                    <img src={item.imgSrc} alt={item.title}></img>
                    <h2>{item.title}</h2>
                </Flex.Item>
            )
        })
    }
    // 渲染资讯news数据
    renderNews() {
        return this.state.news.map(item => {
            return (
                <div className="news-item" key={item.id}>
                    <div className="imgwrap">
                        <img
                            className="img"
                            src={`http://localhost:8081${item.imgSrc}`}
                            alt=""
                        />
                    </div>
                    <Flex className="content" direction="column" justify="between">
                        <h3 className="title">{item.title}</h3>
                        <Flex className="info" justify="between">
                            <span>{item.from}</span>
                            <span>{item.date}</span>
                        </Flex>
                    </Flex>
                </div>
            )
        })
    }

    // 钩子函数里调用方法获取数据
    componentDidMount() {
        this.getSwipers()
        this.getGroups()
        this.getNews()
    }

    render() {
        return (
            <div className="index">
                {/* 轮播图 */}
                <div className="swiper">
                    {
                        this.state.isSwiperLoaded
                            ? (<Carousel autoplay infinite >{this.renderSwiper()}</Carousel>)
                            : ''
                    }

                    {/* 顶部搜索框 */}
                    <Flex className="search-box">
                        {/* 左侧白色区域 */}
                        <Flex className="search">
                            {/* 位置 */}
                            <div
                                className="location"
                                onClick={() => this.props.history.push('/citylist')}
                            >
                                <span className="name">{this.state.curCityName}</span>
                                <i className="iconfont icon-arrow" />
                            </div>

                            {/* 搜索表单 */}
                            <div
                                className="form"
                                onClick={() => this.props.history.push('/search')}
                            >
                                <i className="iconfont icon-seach" />
                                <span className="text">请输入小区或地址</span>
                            </div>
                        </Flex>
                        {/* 右侧地图图标 */}
                        <i
                            className="iconfont icon-map"
                            onClick={() => this.props.history.push('/map')}
                        />
                    </Flex>
                </div>

                {/* 导航菜单 */}
                <Flex className="nav">{this.renderNavigation()}</Flex>

                {/* 租房小组 */}
                <div className="group">
                    <h3 className="group-title">
                        租房小组<span className="more">更多</span>
                    </h3>

                    {/* 宫格组件 */}
                    <Grid
                        data={this.state.groups}
                        activeStyle={true}
                        columnNum={2}
                        square={false}
                        hasLine={false}
                        renderItem={(item) => (
                            <Flex className="group-item" key={item.id} justify="around">
                                <div className="desc">
                                    <p className="title">{item.title}</p>
                                    <span className='info'>{item.desc}</span>
                                </div>
                                <img
                                    src={`http://localhost:8081${item.imgSrc}`}
                                    alt=''
                                />
                            </Flex>
                        )}
                    />
                </div>

                {/* 最新资讯 */}
                <div className="news">
                    <h3 className="group-title">最新资讯</h3>
                    <WingBlank size="md">{this.renderNews()}</WingBlank>
                </div>
            </div>
        );
    }
}